<template>
	<view>
		<uni-popup class="replyPopup" ref="popup" @open="open" @maskClick="maskClickTest" background-color="#fff">
			<scroll-view class="scroll-Y" scroll-y="true" @scrolltolower="scrolltolower">
				<CommentItem :item="replyItem" :closeBtn="true" :childState="true">
				</CommentItem>
				<view class="divider"></view>
				<view class="list">
					<view class="row" v-for="item in childReplyArr">
						<comment-item @removeEnv="commentEnv" :childState="true" :item="item"></comment-item>
					</view>
					<uni-load-more class="replyLoadMore" :status="loadMoreStatus"></uni-load-more>
					<view class="interval"></view>
				</view>
			</scroll-view>
			<CommentFrame @commentEnv="commentEnv" :commentObj="commentObj2" :placeholder="'回复：'+ replyName">
			</CommentFrame>
		</uni-popup>
	</view>
</template>

<script>
	let lastTime = 0
	let nowTime = Date.now()
	let inThrottle = false
	let timeout;
	import {
		giveName,
		giveAvatar
	} from "@/utils/tools.js"
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database();
	export default {
		name: "CommentPopup",
		data() {
			return {
				loadMoreStatus: 'loading',
				showLoding: false,
				limitNum: 3,
				replyItem: {},
				replyName: "",
				commentObj2: {
					article_id: "",
					comment_type: 1,
					reply_user_id: "",
					reply_comment_id: "",
				},
				childReplyArr: []
			};
		},
		computed: {
			getReplyName: {
				get() {
					return '文明发言~'
				},
				set(e) {
					// console.log(e);
					this.replyName = giveName(e)
				}
			}
		},
		onUnload() {
			this.childReplyArr = []
		},
		methods: {
			// 防抖
			debounceFun(fun, limit) {
				clearTimeout(timeout);
				timeout = setTimeout(() => {
					fun()
				}, 800)
			},
			// 打开二级评论列表
			open(item) {
				console.log('open');
				this.$refs.popup.open('bottom')

				this.replyItem = item
				this.getReplyName = item

				this.commentObj2 = {
					...this.commentObj2,
					article_id: item.article_id,
					reply_user_id: item.user_id[0]._id,
					reply_comment_id: item._id,
				}

				if (item.totalReply) {
					// this.getSecondLevelComment()
					this.childReplyArr = [];
					this.debounceFun(this.getSecondLevelComment, 500)
				} else {
					this.loadMoreStatus = 'no-more'
				}
			},
			// 点击遮罩关闭
			maskClickTest() {
				this.childReplyArr = [];
				this.loadMoreStatus = 'loading'
				this.showLoding = false
			},
			// 二级评论滚动触底
			scrolltolower() {
				// 节流
				console.log('scrolltolower');
				if (!this.showLoding) {
					this.debounceFun(this.getSecondLevelComment, 500)
				}
			},
			// 评论、删除成功后的回调
			commentEnv(e) {
				this.childReplyArr = [];
				this.getSecondLevelComment();
			},
			// 获取二级评论数据
			getSecondLevelComment(replyItem) {
				let commentTemp = db.collection("cloud_fishCircle-comments")
					.where(`article_id == "${this.replyItem.article_id}" && comment_type==1 && 
				reply_comment_id == "${this.replyItem._id}"`).orderBy("comment_date desc").skip(this.childReplyArr
						.length).limit(this.limitNum).getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp()
				if (!this.showLoding) {
					this.loadMoreStatus = 'loading'
				}
				db.collection(commentTemp, userTemp).get().then(res => {
					console.log(res);
					let oldArr = this.childReplyArr;
					let resDataArr = [...oldArr, ...res.result.data]
					this.childReplyArr = resDataArr

					if (!res.result.data.length || res.result.data.length < this.limitNum) {
						this.loadMoreStatus = 'no-more'
						this.showLoding = true
					} else {
						this.loadMoreStatus = 'more'
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.replyPopup {
		z-index: 100;

		.scroll-Y {
			box-sizing: border-box;
			height: 800rpx;
			padding: 30rpx;
			padding-bottom: 80rpx;

			.replyLoadMore {}

			.interval {
				height: 160rpx;
			}

			.divider {
				background-color: #f7f7f7;
				height: 8rpx;
				margin-bottom: 25rpx;
			}
		}
	}
</style>